<template>
  <div class="home-view">
    <div class="bannerbox">
      <img :src="$format_img(activityDetail.banner)" alt />
    </div>
    <div class="top-head">
      <div class="audit-level">
        <div class="t1">
          <span><img src="../../assets/home/Judges.png" alt="" /></span>
          <span>{{activityInfo.name}}评选</span>
        </div>
      </div>
      <div class="audit-date">
        <div class="t1">
          <span><img src="../../assets/home/Timers.png" alt="" /></span>
          <span>评选结束时间：</span>
          <countdown :endTime="activityInfo.end_time" v-if="activityInfo" />
        </div>
      </div>
    </div>
    <div class="main-box">
      <div class="main-container-a">
        <div class="screen-box">
          <div class="menu">
            <div class="main-cont navbox">
              <ul class="tabs">
                <li
                  @click="gallerySort(0, 0)"
                  :class="{ active: pageInfo.star === 0 && pageInfo.status === 0 }"
                >
                  全部 ({{ level1total }})
                </li>
                <li
                  v-for="star in starsArray"
                  :key="star.key"
                  @click="gallerySort(star.key, 0)"
                  :class="{ active: pageInfo.star === star.key }"
                >
                  {{ star.key }}星 ({{ star.value }})
                </li>
                <li
                  @click="gallerySort(0, 1)"
                  :class="{ active: pageInfo.star === 0 && pageInfo.status === 1 }"
                >
                  未评价 ({{ not_reviewed }})
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="list-box">
          <s-List :list="list" @onUpdate="getWorksList" :starLevel="star_level"></s-List>
          <div v-if="list.length > 0" class="more-view">
            <el-pagination
              background
              @current-change="loadMore"
              :current-page.sync="pageInfo.page"
              :page-size="pageInfo.limit"
              layout=" prev, pager, next"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="showPrompt"
      width="460px"
      top="30vh"
      class="prompt"
      :close-on-click-modal="false"
      lock-scroll
    >
      <!-- 自定义头部 -->
      <template #title>
        <div style="line-height: 29px; display: flex;align-items: center;">
          <img src="../../assets/tips.png" alt />
          <span style="margin-left:10px;font-size: 26px;color: #1A1A1A;">提示</span>
        </div>
      </template>
      <span
        style="font-size: 18px;color: #1A1A1A;line-height: 29px;"
      >各位评委，本次评审作品需要筛选出至少{{minimum}}个作品，请知悉，谢谢！</span>
    </el-dialog>
  </div>
</template>
<script>
import Cookies from "js-cookie";
import Countdown from "@/components/Countdown.vue";
import sList from "./components/CreateList.vue";
import { getWorksListSec, getWorksStatusSec, getActivityDetail_S } from "@/api/index";
export default {
  name: "Home",
  components: {
    sList,
    Countdown,
  },
  mixins: [],
  props: {},
  data() {
    return {
      show: false,
      pageInfo: {
        page: 1,
        limit: 20,
        status: 0,
        star: 0,
      },
       star_level:0,
      total: 0,
       minimum:0,//最少需要评论数
      showPrompt: false,
       hasShownPrompt: false, 
      loading: false,
      swiperList: [],

      categoryList: [],
      selectedItems: [], //批量淘汰数组
      list: [],

      starsTotal: {},
      level1total: 0,
      not_reviewed: 0,
      activityInfo: {},
      activityDetail: {},
    };
  },
  computed: {
    starsArray() {
      return Object.entries(this.starsTotal).map(([key, value]) => ({
        key: Number(key),
        value,
      }));
    },
  },
  watch: {},
  mounted() {
    this.getWorksList();
    this.getDetail();
  },
  methods: {
   checkPassTotal() {
      if ((this.level1total - this.not_reviewed)< this.minimum && !this.hasShownPrompt) {
        this.showPrompt = true;
        this.hasShownPrompt = true; // 设置标志，表示已经显示过提示
      }
  
    },
    getDetail() {
      getActivityDetail_S().then((res) => {
        this.activityInfo = res.info;
         this.minimum=res.info.minimum
         this.star_level=res.info.star_level
         Cookies.set('star_level', this.star_level)
        this.activityDetail = res.activity;
      });
    },
    // 輪播
    getBanner() {
      workBannersList().then((res) => {
        res.data.data.forEach((item) => {
          item.img_url = this.$format_img(item.img_url);
        });
        this.swiperList = res.data.data;
      });
    },
    gallerySort(id, type) {
      if (type == 0) {
        if (id !== 0) {
          if (this.pageInfo.star != id) {
            this.pageInfo.status = 0;
            this.pageInfo.star = id;
            this.pageInfo.page = 1;
            this.getWorksList();
          }
        } else {
          this.pageInfo.status = 0;
          this.pageInfo.star = 0;
          this.pageInfo.page = 1;
          this.getWorksList();
        }
      } else {
        this.pageInfo.status = 1;
        this.pageInfo.star = 0;
        this.pageInfo.page = 1;
        this.getWorksList();
      }
    },
    // 获取列表数据
    getWorksList() {
      let params = Object.assign({}, this.pageInfo);
      getWorksListSec(params).then((res) => {
        this.list = res.list;
        this.total = res.total;
        getWorksStatusSec().then((res) => {
          this.level1total = res.total;
          this.not_reviewed = res.not_reviewed;
          this.starsTotal = res.stars;
          this.checkPassTotal()
        });
      });
    },
  
    loadMore(val) {
      this.pageInfo.page = val;
      this.getWorksList();
    },
 
    handleCancel() {
      // 处理取消事件
      this.show = false;
    },
    handleConfirm() {
      // 处理确定事件
      this.show = false;
    },
    handleBeforeClose(done) {
      // 处理关闭事件
      this.show = false;
    },
  },
};
</script>
<style  scoped>
::v-deep .el-dialog{

border-radius: 20px;
}
>>> .prompt .el-dialog__header {
  padding: 30px 40px 10px;
}

>>> .prompt .el-dialog__body {
  padding: 20px 40px 60px;
}
.home-view {
  padding-bottom: 60px;
}
.main-box {
  box-sizing: border-box;
}
.main-container-a {
  width: 100%;
}
.bannerbox {
  width: 100%;
  height: 700px;
}
.bannerbox img {
  cursor: pointer;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.active {
  border-bottom: 2px solid #00bfd6;
  color: #00bfd6 !important;
}
a {
  text-decoration: none;
  color: black;
}

.top-head {
  height: 80px;
  line-height: 80px;
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}
.top-head .audit-level {
  text-align: right;
  color: #ffffff;
  width: 45%;
  max-width: 640px;
  background: #00bfd6;
   height: 80px;
}
.top-head .audit-level .t1 {
  padding-right: 150px;
  font-size: 20px;
   height: 80px;
}
.top-head .audit-level .t1 img,
.top-head .audit-date .t1 img {
  vertical-align: middle;
  margin-right: 10px;
}
.top-head .audit-date {
  background: #f5f5f5;
  width: 100%;
}
.top-head .audit-date .t1 {
 height: 80px;
  padding-left: 210px;
  font-size: 20px;
}
.top-head .audit-date .t1 .block {
  font-weight: bold;
  font-size: 30px;
}
.top-head .audit-date .t1 .text {
  font-size: 16px;
}
.menu {
  border-bottom: 1px solid #e6e6e6;
}
.screen-box .menu .navbox {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.delAllBtn {
  cursor: pointer;
  padding: 8px 10px;
  font-size: 16px;
  color: #808080;
  border-radius: 6px;
  border: 1px solid #808080;
}
.screen-box ul {
  position: relative;
  display: flex;
  align-items: baseline;
}
.screen-box ul li {
  margin-right: 40px;
  font-size: 20px;
  cursor: pointer;
  color: #000;
  text-align: center;
  padding-bottom: 20px;
}
.more-view {
  margin: 40px auto;
  text-align: center;
}
</style>
